<template>
  <el-container id="main_box">
	  <el-header>
		  <div class="img_box">
			  <!--logo 网站名称-->
			  <img src="../assets/kaixin.jpg" alt=" " style="width: 50px; height: 50px">
			  <span>开心发财后台管理系统</span>
		  </div>
		  <!--退出按钮-->
		  <el-button type="info" @click="quit">退出</el-button>
	  </el-header>
	  
	  <el-container>
		  <el-aside :width="isCollapse ? '64px' : '200px'">
			<button class="toggle-button" @click="toggleCollapse">菜单栏</button>
			<!--侧边栏菜单-->
			<el-menu
			:router="true"
			class="el-menu-vertical-demo"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="orange"
			:unique-opened="true"
			:collapse="isCollapse"
			:collapse-transition="false"
			>
				<!-- 一级菜单 -->
				<el-submenu :index="'/'+submenu.linkUrl" v-for="submenu in menuList" :key="submenu.id">
					<!-- 一级菜单的模板区域 -->
					<template slot="title">
					<!-- 一级菜单的图标 -->
					<i :class="iconObj[submenu.id]"></i>
					<!-- 一级菜单的文字 -->
					<span>{{ submenu.name }}</span>
					</template>
					<!-- 没有子级的二级菜单 -->
					<el-menu-item :index="menuitem.linkUrl" :key = "menuitem.id" v-for="menuitem in submenu.submenus">
						<i class="el-icon-menu"></i>
						<span slot="title">{{ menuitem.name }}</span>
					</el-menu-item>
				</el-submenu>
			</el-menu>
		  </el-aside>
		  <el-main>
			  <router-view></router-view>
		  </el-main>
	  </el-container>
  </el-container>
</template>

<script>
export default {
	data() {
	  return {
	    //菜单列表
	    menuList: [],
	    //图标数组
	    iconObj: {
	      '125': 'iconfont icon-user',
	      '103': 'iconfont icon-3702mima',
	      '101': 'iconfont icon-shangpin',
	      '102': 'iconfont icon-danju',
	      '145': 'iconfont icon-baobiao',
	    },
		//是否折叠的标志
		isCollapse: false
	  }
	},
	created() {
	  this.getMenuList()
	},
	methods:{
		
		 /* // 获取所有的侧边栏菜单
		    async getMenuList() {
		      const uid =  sessionStorage.getItem("token")
		      
		      const {data: res} = await this.$http.get(`/System/Menus/getMenus/${uid}`)
		      this.menuList = res
		      console.log(this.menuList);
		    }, */
		
		//控制菜单展开和折叠
			toggleCollapse() {
		    this.isCollapse = !this.isCollapse
		},
		//获取所有的侧边栏菜单
		async getMenuList() {
			const uid =  sessionStorage.getItem("token")
			
			const {data: res} = await this.$http.get(`/System/Menus/getMenus/${uid}`)
			this.menuList = res
			console.log(this.menuList);
		},
		//退出按钮
		quit(){
			//清空 sessionStorage
			window.sessionStorage.clear()
			//退回到登录界面 进行路由跳转
			this.$router.push('/login')
		}
	}
}
</script>

<style scoped>
/* 父容器高度 */
#main_box {
  height: 100%;
}

.el-header {
  background-color: #b3c0d1;
  /* 
  在flex 布局的容器中，
  可以设置justify-content: space-between;实现两对齐
  */
  display: flex;
  justify-content: space-between;
  /* 当容器是flext，可以设置 align-items: center */
  align-items: center;
  div {
    display: flex;
    align-items: center;
  }
  span {
    margin-left: 20px;
  }
}

.el-menu {
    border-right: none;
}

.el-main {
  background-color: #e9eef3;
}
</style>